<template lang="html">
  <div>
      <div class="btn">
          <el-button type="primary" @click="back">返回上一级</el-button>
      </div>
      <div class="search">
          <div class="input">
              <p><label>商品名称：</label><el-input placeholder="请输入内容" v-model="pageData.name"></el-input></p>
              <p><el-button type="primary" class="se" style="margin-left:10px;" @click="search">搜索</el-button></p>
                <p><el-button type="primary" class="se" style="margin-left:10px;" v-if="$route.query.num == '1'" @click="confirm('put')">确定编辑</el-button></p>
              <p><el-button type="primary" class="se" style="margin-left:10px;"   v-if="$route.query.num == undefined" @click="confirm('put')">确定添加</el-button></p>

          </div>
      </div>
      <el-table
        ref="editTable"
        :data="list.tbody"
        tooltip-effect="dark"
        style="width: 100%"
        @select-all="selectionVal"
        @select="selectionVal">
        <el-table-column
          type="selection"
          width="80">
        </el-table-column>

        <el-table-column
          v-for='(item,idx) in list.thead' :label="item.label"  :key='idx' align="center">
          <template slot-scope="scope">{{ scope.row[item.prop] }}</template>
        </el-table-column>
      </el-table>
      <div class="pagi">
        <el-pagination
          @current-change="handSize"
          :page-sizes="[10]"
          :page-size="15"
           layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
  </div>
</template>

<script>
  import tableVue from '@/components/alltable.vue'
  import {
    allProductList,
    relevanceProduct,
    getRecommendProduct
  } from "@/api/shoppingCentre/shoppingCentre";
  export default {
    components : {
      tableVue,
    },
    data () {
      return {
        list : {
          thead : [
            {label:'商品名称',prop:"goodsName",rowspan:1},
            {label:'上架',prop:"isOnline",rowspan:1},
            {label:'品牌',prop:"brandName",rowspan:1},
            {label:'创建时间',prop:"gmtCreate",rowspan:1},
            {label:'更新时间',prop:"gmtUpdate",rowspan:1},
          ],
          tbody : []
        },
        total : 0,
        pageData : {
          name :''
        },
        select_val : [],
        compileList : []
      }
    },
    mounted () {
      this.select_val = [];
      if (this.$route.query.num == 1) {//编辑跳过来
          this.GetRecommendProduct(this.$route.query.id);
      }
      var data = {
        current : '1',
        size : '10'
      }
      this.getProductList(data);

    },
    methods : {
      GetRecommendProduct (id) {//编辑获取推荐商品
        getRecommendProduct(id).then(res=>{
          if (res.data.code == 'OK') {
              this.select_val = res.data.data;
              // console.log(this.select_val);
          }
        })
      },
      getProductList (data) {//默认进来拉去的接口
        allProductList (data).then(res=>{
          if (res.data.code == 'OK') {

            this.total = res.data.data.total;
            this.pageData.loading = false;
            this.list.tbody = res.data.data.records.map(item=>{
               item.gmtCreate = this.switchTime(item.gmtCreate)
               item.gmtUpdate = this.switchTime(item.gmtUpdate)
               return item;
            });
            // var t = setTimeout(() => {
            //   this.select_val.forEach(item => {
            //     let select_row = this.list.tbody.find(t=>t.goodsId == item.goodsId);
            //       if(select_row){
            //         this.$refs.editTable.toggleRowSelection(select_row, true);
            //       }
            //   });
            //   clearTimeout(t);
            // }, 0);
            setTimeout(()=>{
              this.list.tbody.map(item=>{
                this.select_val.forEach(t=>{
                  if (item.goodsId == t.goodsId) {
                     this.$refs.editTable.toggleRowSelection(item,true);
                  }
                })
              })
            },0)
          } else {
            this.$message.error(res.data.message);
          }
        })
      },
      back () {
        this.$router.push({
           name : 'recommendFloor'
        })
      },
      search () {
        var data  = {
          goodsName : this.pageData.name,
          size : '10',
          current : val,
        }
        this.getProductList(data);
      },
      selectionVal (data) {
        // console.log(data);

        this.list.tbody.map(item=>{
           this.select_val.map((val,idx) => {
             if (item.goodsId == val.goodsId) {
                 this.select_val.splice(idx,1);
                 // console.log(item.goodsId,val.goodsId);
             }
           })
        });
        data.map(item=>{
          if(this.select_val.indexOf(item.goodsId) == -1){
             this.select_val.push(item)
          }
        });
        // console.log(data,this.select_val);
      },
      handSize (val) {
        var data  = {
          goodsName : this.pageData.name,
          size : '10',
          current : val,
        }
        this.getProductList(data);
      },
      confirm (method) {
          if (this.select_val.length < 1) {
            this.$message.error('请选择要添加的商品')
            return false
          }
          var ids = []
          this.select_val.map(item=>{
              ids.push(item.goodsId)
              let set = new Set(ids);
              ids = Array.from(set);
          })
          relevanceProduct(this.$route.query.id,ids,method).then(res=>{
             if (res.data.code == 'OK') {
                if (method == 'post') {
                     this.$message.success('添加成功')
                } else {
                     this.$message.success('编辑成功')
                }
               setTimeout(()=>{
                  this.$router.push({
                    name  : 'recommendFloor'
                  })
               },1000)
             } else {
                 this.$message.error(res.data.message)
             }
          })
      },
    }
  }
</script>

<style scoped>
  @import "../../../../../styles/common.css";
  .btn {
    margin: 10px 0 0 10px;
  }
  .pagi {
    float: right;
    margin: 20px;
    margin-right: 30px;
  }
</style>
